<template>
    <div class="byt-theme theme-dialog">
        <div class="theme-dialog-title">
            <div class="icon-close" @click="toggleModal">×</div>
            选择主题
        </div>
        <div class="theme-dialog-body" ref="themeBodyRef">
            <div class="sub-title">主题颜色
                <!-- <span>&nbsp;&nbsp;|&nbsp;&nbsp;夜间模式</span>
                <span class="icon-night" :class="{'active': isNight}" @click="changeNight"></span> -->
            </div>
            <div class="colors-list">
                <div
                class="colors-list-item"
                :style="{
                    backgroundColor: color.primary
                }"
                :class="{active: colorIndex === index}"
                @click="() => {colorIndex = index;changeTheme('color', {themeColor: color, colorIndex: index})}"
                v-for="(color, index) in colors"
                :key="index"
                >
                </div>
            </div>
            <div class="sub-title">在线壁纸</div>
            <div class="cate-list-item tc" v-if="!loading && !picData.length && !cateList.length">暂无数据~</div>
            <ul class="cate-list flexbox-h">
                <li
                class="cate-list-item"
                :class="{active: cateIndex === item.old_id}"
                @click="onCateChange(item)"
                v-for="item in cateList"
                :key="item.old_id + cateIndex"
                >
                    {{ item.show_name }}
                </li>
            </ul>
            <div class="pic-list" v-loading="loadingPic" element-loading-text="加载中...">
                <div
                class="pic-list-item"
                :class="{active: picIndex === pic.id}"
                @click="() => {picIndex = pic.id;changeTheme('pic', {bgUrl: pic.realUrl, bgUrlIndex: pic.id})}"
                v-for="(pic, picIdx) in picData"
                :key="picIdx"
                >
                    <el-image :title="pic.tag && pic.tag.split(',').join('_')" lazy :src="pic.url" alt=""></el-image>
                </div>
            </div>
            <div class="more-btn" v-if="total > picData.length" @click="loadingMore">
                <i v-if="loadingText === '加载中...'" class="el-icon-loading mr10"></i>
                {{ loadingText }}
            </div>
            <!-- <div class="sub-title">精选壁纸</div>
            <div class="pic-list" v-loading="loading">
                <div
                class="pic-list-item"
                :class="{active: picIndex === index}"
                @click="() => {picIndex = index;changeTheme('type', {bgUrl: pic, bgUrlIndex: index})}"
                v-for="(pic, index) in localBgUrls"
                :key="pic"
                >
                    <img :src="pic" alt="">
                </div>
            </div> -->
        </div>
    </div>
</template>

<style lang="less" scoped>
.theme-dialog {
    height: calc(100vh - 40px);
    opacity: 1;
    z-index: 999999;
    .sub-title {
        color: @white;
        font-size: 16px;
        line-height: 16px;
        margin: 10px 0 20px;
        padding-left: 10px;
        display: flex;
        align-items: center;
        border-left: 4px solid @primary;
        .icon-night {
            display: inline-block;
            margin-left: 20px;
            width: 20px;
            padding: 2px 10px;
            border-radius: 30px;
            overflow: hidden;
            height: 14px;
            background: rgba(0, 0, 0, .8);
            position: relative;
            transition: all .3s;
            background-color: @primary;
            &::after {
                content: "";
                position: absolute;
                width: 14px;
                height: 14px;
                border-radius: 14px;
                top: 2px;
                left: 2px;
                transition: all .3s;
                background-color: @white;
            }
            &.active {
                &::after {
                    content: "";
                    position: absolute;
                    // right: 2px;
                    left: 24px;
                    background-color: @c-000;
                }
            }
        }
    }
    &-title {
        position: relative;
        line-height: 40px;
        height: 40px;
        font-size: 18px;
        color: @white;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.9);
        // border-bottom: 1px solid @c-ccc;
    }
    &-body {
        padding: 20px;
        overflow: hidden;
        overflow-y: auto;
        height: 100%;
    }
    &-footer {
        height: 40px;
        line-height: 40px;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.7);
        border-top: 1px solid @c-ccc;
        .btns {
            span {
                padding: 5px 10px;
                font-size: 14px;
                color: @white;
                border-radius: 3px;
                border: 1px solid @c-ccc;
                margin-right: 20px;
                cursor: pointer;
                transition: all 0.5s;
                &:hover {
                    background-color: @white;
                    color: @c-333;
                }
                &:last-child {
                    margin-right: 0;
                }
            }
        }
    }
    .pic-list {
        display: flex;
        flex-wrap: wrap;
        min-height: 100px;
        justify-content: space-between;
        &-item {
            margin-bottom: 15px;
            // margin-right: 15px;
            height: 75px;
            width: 135px;
            cursor: pointer;
            overflow: hidden;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            border-radius: 10px;
            border: 2px solid @c-e8;
            background: @c-e8;
            &.active {
                border-color: @primary;
            }
            img {
                // height: 200px;
                width: 100%;
            }
            &:nth-child(3n) {
                margin-right: 0;
            }
        }
    }
    .colors-list {
        display: flex;
        flex-wrap: wrap;
        // justify-content: space-between;
        &-item {
            width: 42px;
            height: 42px;
            border-radius: 3px;
            margin-right: 16px;
            margin-bottom: 16px;
            position: relative;
            overflow: hidden;
            cursor: pointer;
            &:nth-child(8n) {
                margin-right: 0;
            }
            &.active::after {
                content: '';
                display: block;
                position: absolute;
                bottom: -10px;
                right: -10px;
                width: 0;
                height: 0;
                border-width: 10px;
                border-color: var(--white);
                border-style: solid;
                transform: rotateZ(45deg);
            }
        }
    }
    .icon-close {
        position: absolute;
        left: -40px;
        padding: 0 12px;
        background: rgba(0,0,0,0.5);
        top: 0px;
        font-size: 28px;
        cursor: pointer;
        color: @white;
        transition: all 0.3s;
        border-radius: 5px 0 0 5px;
        &:hover {
            // transform: rotateZ(90deg);
            color: @primary;
        }
    }
    .cate-list {
        display: flex;
        flex-wrap: wrap;
        // justify-content: space-between;
        margin-bottom: 10px;
        &-item {
            margin-right: 20px;
            margin-bottom: 5px;
            cursor: pointer;
            color: @white;
            font-size: 14px;
            line-height: 24px;
            transition: all 0.3s;
            border-bottom: 2px solid transparent;
            &:nth-child(10n) {
                margin-right: 0;
            }
            &:hover {
                color: @primary;
            }
            &.active {
                color: @primary;
                border-bottom: 2px solid @primary;
            }

        }
    }
    .more-btn {
        text-align: center;
        line-height: 32px;
        color: @white;
        &:hover {
            color: @primary;
            cursor: pointer;
        }
    }
}
</style>
<script>
/* eslint-disable no-unused-vars */
import {
    getLocalColors,
    changeTheme
} from '@/utils'
import $api from '@/api/apiList'
const { wallpaper } = $api
export default {
    data () {
        return {
            loading: true,
            loadingPic: true,
            loadingText: '点击或下拉加载更多 >',
            isNight: false,
            picIndex: 0,
            cateIndex: 0,
            colorIndex: 0,
            colors: [],
            localBgUrls: [],
            // picData: [],
            // cateList: [],
            pageno: 1,
            count: 15,
            activeIndex: 0
            // ...computed(() => themeData)
        }
    },
    computed: {
        cateList () {
            return this.$store.state.theme.cateList
        },
        picData () {
            return this.$store.state.theme.picData
        },
        total () {
            return this.$store.state.theme.total
        }
    },
    mounted () {
        this.getData()
        this.$refs.themeBodyRef.addEventListener('scroll', (e) => {
            // 文档内容实际高度（包括超出视窗的溢出部分）
            var scrollHeight = e.target.scrollHeight
            // 滚动条滚动距离
            var scrollTop = e.target.scrollTop
            // 窗口可视范围高度
            var clientHeight = e.target.offsetHeight

            if (clientHeight + scrollTop >= scrollHeight) {
                // console.log('===加载更多内容……===')
                this.loadingMore()
            }
        })
    },
    methods: {
        getData () {
            const localThemeConfig = JSON.parse(JSON.stringify(this.$store.state.themeConfig))
            this.colors = localThemeConfig.colors
            this.$store.dispatch('theme/getData', { pageno: this.pageno, count: this.count }).then(res => {
                this.picIndex = localThemeConfig.picIndex || (this.picData[0] && this.picData[0].id) || ''
                this.colorIndex = localThemeConfig.colorIndex || 0
                this.localBgUrls = localThemeConfig.localBgUrls || []
                this.loading = false
                this.loadingPic = false
            }).catch(() => {
                this.loading = false
                this.loadingPic = false
            })
        },
        toggleModal () {
            this.$emit('close-modal', true)
        },
        changeNight () {
            this.isNight = !this.isNight
            this.isNight && (document.querySelector('#app').classList = 'dark-mode-invert')
            !this.isNight && (document.querySelector('#app').classList = '')
        },
        onCateChange (item) {
            if (this.cateIndex === item.old_id) return
            this.pageno = 1
            this.cateIndex = item.old_id
            this.loadingPic = true
            this.loadingText = '下拉加载更多 >'
            this.$store.dispatch('theme/getListByCategory', {
                ...item,
                pageno: this.pageno,
                count: this.count
            }).then(res => {
                this.loading = false
                this.loadingPic = false
            })
        },
        loadingMore () {
            this.pageno++
            this.loadingText = '加载中...'
            this.$store.dispatch('theme/loadingMore', {
                old_id: this.cateIndex,
                category: this.cateIndex || 'unsplash',
                pageno: this.pageno,
                count: this.count
            }).then(res => {
                this.loadingText = '点击或下拉加载更多 >'
            })
        },
        changeTheme (type, data) {
            const localThemeConfig = this.$store.state.themeConfig
            changeTheme('', {
                ...data,
                colors: data.colors || localThemeConfig.colors,
                themeColor: data.themeColor || localThemeConfig.themeColor
            }).then(res => {
                let themeConfig = {}
                if (type === 'color') {
                    themeConfig = {
                        colorIndex: data.colorIndex,
                        themeColor: data.themeColor
                    }
                }
                if (type === 'pic') {
                    themeConfig = {
                        picIndex: data.bgUrlIndex,
                        bgUrlIndex: data.bgUrlIndex,
                        bgUrl: data.bgUrl
                    }
                }
                this.$store.dispatch('themeChanged', {
                    ...themeConfig,
                    themeChanged: !this.$store.state.themeChanged
                })
            })
        }
    }
}
</script>
